// 导入three.js
// 掌握gsap设置各种动画效果
import * as THREE from "three"
// 目标 使用控制器 查看3d
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
// 掌握gsap 设置各种动画效果
// 导入动画库
import gsap from "gsap"
// 导入dat.gui
import * as dat from 'dat.gui';

const gui = new dat.GUI();
// 1 创建场景 
const scene = new THREE.Scene()
    // 2 创建相机 PerspectiveCamera透视相机 近端0.1 远端1000
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    // 设置相机位置
camera.position.set(0, 0, 10)
scene.add(camera)
    //添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
// 材质
   // 导入纹理
const textureLoader = new THREE.TextureLoader()
const doorColorTexture = textureLoader.load('./textures/door/mumen.jpg')   //添加物体
const doorAplharTexture = textureLoader.load('./textures/door/aplah.jpeg')   //添加物体

// 透明纹理   黑色透明 白色不透明 .alphaMap : Texture
// alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。 默认值为null。
// transparent:true 才能2个材质贴图 其中一个透明度生效
// 纹理的重复
console.log(doorColorTexture);
const basicMaterial = new THREE.MeshBasicMaterial({ color: "#ffffff", map: doorColorTexture, alphaMap: doorAplharTexture, transparent: true, side: THREE.DoubleSide })
    // 默认渲染前面 后面一般不看 渲染了影响性能
    // 创建几何体
const cube = new THREE.Mesh(cubeGeometry, basicMaterial)
scene.add(cube)
    // 添加平面
const plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(1, 1), basicMaterial);
// .set ( normal : Vector3, constant : Float ) : this
// normal - 单位长度的向量表示平面的法向量。
// constant - 原点到平面有符号距离。默认值为 0。
plane.position.set(3, 2, 0)
scene.add(plane)
    // 初始化渲染器
const renderer = new THREE.WebGLRenderer();





// 设置渲染的尺寸大小 
renderer.setSize(window.innerWidth, window.innerHeight)
    // 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)
    // 使用渲染器 通过相机将场景渲染出来
renderer.render(scene, camera)
    // 添加坐标轴
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 创建 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
    // 添加控制器阻尼 必须在动画循环里调用controls.update() 当.enableDamping设置为true的时候，阻尼惯性有多大。 Default is 0.05.
    // 请注意，要使得这一值生效，你必须在你的动画循环里调用.update()。
controls.enableDamping = true
controls.dampingFactor = 0.03
    // 每一帧渲染
    // Clock控制时间对象
    // 设置时钟
const clock = new THREE.Clock()
window.addEventListener("dblclick", () => {
        const fullScreen = document.fullscreenElement
        if (!fullScreen) {
            // 画布全屏用 renderer.domElement.requestFullscreen()
            renderer.domElement.requestFullscreen()
        } else {
            // 退出全屏是用文档 退出 
            document.exitFullscreen()
        }

    })
    // gsap.to(cube.rotation, { x: 10 * Math.PI, yoyo: true, duration: 4, ease: "power5.inOut", repeat: -1, })
    // gsap.gra repeat重复

function render() {
    controls.update()
    renderer.render(scene, camera);
    requestAnimationFrame(render)

}
render()
    // 监听画面变化 更新渲染画面
window.addEventListener("resize", () => {
    console.log("画面变化了");
    // 更新摄像头
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新摄像机的投影矩阵
    camera.updateProjectionMatrix();
    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置的渲染器的像素比例
    renderer.setPixelRatio(window.devicePixelRatio)
})